<template>
  <d2-container>
    <template slot="header">指定自成交-新增</template>
    <el-card shadow="never" class="d2-mb titleline">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">基础信息</p>
      </template>
      <el-form
        class="filter-container"
        ref="egForm"
        :rules="rules"
        :model="egForm"
        label-width="110px"
      >
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="匹配名称" prop="match_name">
              <el-input
                placeholder="请输入内容"
                v-model="egForm.match_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="匹配ID" prop="match_id">
              <el-input v-model="egForm.match_id" disabled> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="匹配说明">
              <el-input
                class="resizeNone"
                style="width:100%"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="egForm.match_explain"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="d2-mb titleline">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">交易信息</p>
      </template>
      <el-card shadow="never" class="d2-mb">
        <el-button type="default" size="small" @click="add_row_fn()">
          <d2-icon name="plus" />
          增行
        </el-button>
        <el-button
          type="default"
          @click="del_row"
          size="small"
          icon="el-icon-delete"
        >
          删行
        </el-button>
        <div style="margin-top:15px">
          <el-table
            :data="spotData"
            border
            fit
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column type="selection" width="45"></el-table-column>

            <el-table-column prop="command_name" label="指令名称" sortable>
            </el-table-column>
            <el-table-column prop="productName" label="品名" sortable>
            </el-table-column>
            <el-table-column prop="instrument" label="合约" sortable>
            </el-table-column>
            <el-table-column prop="direction" label="方向" sortable>
            </el-table-column>
            <el-table-column prop="offset_flag" label="开/平" sortable>
            </el-table-column>
            <el-table-column prop="volume" label="手数" sortable>
              <template slot-scope="scope">
                <el-input type="number" min=0 v-model="scope.row.volume" clearable/>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="成交价" sortable>
              <template slot-scope="scope">
                <el-input type="number" min=0 v-model="scope.row.price" clearable/>
                 <!-- <el-input v-model="scope.row.price" /> -->
              </template>
            </el-table-column>
            <el-table-column prop="real_account" label="柜台账户" sortable>
            </el-table-column>
            <el-table-column prop="sub_account" label="子账户" sortable>
            </el-table-column>
            <el-table-column prop="commodity_unit" label="单位" sortable>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" sortable>
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-button
        type="primary"
        size="small"
        style="float:right;margin:0 0 10px 10px;"
        @click="submit_fn"
      >
        保存
      </el-button>
      <!-- <el-button
        type="default"
        size="small"
        style="float:right"
      >
        取消
      </el-button> -->
      <el-dialog
        title="指令明细选择"
        :visible.sync="dialogVisible"
        width="80%"
      >
        <el-table
          :data="tableData"
          highlight-current-row
          @current-change="handleSelectionChange_dialogVisible"
          style="width: 100%"
        >
          <el-table-column type="index" width="50px"> </el-table-column>
          <el-table-column prop="command_name" label="指令名称">
          </el-table-column>
          <el-table-column prop="command_id" label="指令ID">
          </el-table-column>
          <el-table-column prop="productName" label="品名"> </el-table-column>
          <el-table-column prop="instrument" label="合约"> </el-table-column>
          <el-table-column prop="direction" label="方向"> </el-table-column>
          <el-table-column prop="offset_flag" label="开/平"> </el-table-column>
          <el-table-column prop="volume" label="手数"> </el-table-column>
          <el-table-column label="成交价区间">
            <template slot-scope="scope">
              {{ scope.row.min_price }}-{{ scope.row.min_price }}
            </template>
          </el-table-column>
          <el-table-column prop="real_account" label="柜台账号">
          </el-table-column>
          <el-table-column prop="sub_account" label="子帐号"> </el-table-column>
          <el-table-column prop="commodity_unit" label="单位">
          </el-table-column>
          <el-table-column prop="currency" label="币种"> </el-table-column>
          <el-table-column prop="remarks" label="备注"> </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handlePaginationChange"
          :current-page="egForm.page"
          :page-size="egForm.pageSize"
          layout="total, prev, pager, next"
          :total="egForm.pageTotal"
        >
        </el-pagination>
        <div align="right">
          <el-button size="small" @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button size="small" @click="row_select_fn">选择</el-button>
        </div>
      </el-dialog>
    </el-card>
  </d2-container>
</template>

<script>
import { getFutures_command_trade, command_self_info,getFutures_command_info } from "@/api/url";
export default {
  data() {
    return {
      rules:{
        match_name: [
            { required: true, message: '请选择匹配名称', trigger: 'change' }
          ],
          match_id: [
          ],
      },
      egForm: {
        match_name: "",
        match_id: "",
        match_explain: "",
        page: 1,
        pageSize: 20,
        pageTotal: 0
      },
      input: "",
      textarea3: "",
      spotData: [],
      dialogVisible: false,
      tableData: [],
      selectData: [],
      datas: [],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    add_row_fn() {
      var a = {
        command_name: "",
        command_id: this.egForm.match_id,
        Instrument: ""
      };
      getFutures_command_trade(a).then(res => {
        this.dialogVisible = true;
        this.tableData = res.result.results;
        this.egForm.pageTotal = res.result.count;
      });
    },
    row_select_fn() {
      // this.spotData=this.selectData
      // if(this.selectData.offset_flag!='开仓'){
      //   this.$message({
      //     message: "请选择开仓方向指令",
      //     type: "warning"
      //   });
      //   return
      // }
      this.spotData.push(this.selectData);
      this.spotData.forEach(item => {
        this.$set(item,'price',item.min_price*1)
      });
      this.dialogVisible = false;
    },
    // 多选
    handleSelectionChange(selection) {
      this.datas = selection;
    },
    handleSelectionChange_dialogVisible(selection) {
      this.selectData = selection;
    },
    submit_fn() {
      this.$refs["egForm"].validate(valid => {
        if (valid) {
      if (this.datas.length < 1) {
        this.$message({
          message: "至少选择二条指令明细",
          type: "warning"
        });
      } else {
        if (this.egForm.match_name == "") {
          this.$message({
            message: "请输入匹配名称",
            type: "warning"
          });
        } else {
          //添加判断条件
          // console.log(this.datas)
          let copyDatas = this.datas[0];
          let num = 0;
          let num_fan = 0;
          for (var i = 1; i < this.datas.length; i++) {
            if (copyDatas.productName != this.datas[i].productName) {
              this.$message({
                message: "品名不一样",
                type: "warning"
              });
              return;
            } else if (copyDatas.instrument != this.datas[i].instrument) {
              this.$message({
                message: "合约不一样",
                type: "warning"
              });
              return;
            } else if (copyDatas.offset_flag != this.datas[i].offset_flag) {
              this.$message({
                message: "开/平不一样",
                type: "warning"
              });
              return;
            } else if (copyDatas.price != this.datas[i].price) {
              this.$message({
                message: "成交价不一样",
                type: "warning"
              });
              return;
            } else if (
              copyDatas.commodity_unit != this.datas[i].commodity_unit
            ) {
              this.$message({
                message: "单位不一样",
                type: "warning"
              });
              return;
            }
          }
           for (var shu= 0; shu < this.datas.length; shu++) {
              if(this.datas[shu].volume==''||this.datas[shu].price==''){
              this.$message({
                message: "手数，成交价不能为空",
                type: "warning"
              });
              return
            }
              if (this.datas[shu].direction == '买入') {
                num += this.datas[shu].volume;
              } else {
                num_fan += this.datas[shu].volume;
              }
           }
          if (num != num_fan) {
            console.log(num,num_fan)
            this.$message({
              message: "买入和卖出手数不一样",
              type: "warning"
            });
            return;
          }
          var addData = {
            operation: "ADD",
            self_info: this.egForm,
            trade_info: this.datas
          };
          command_self_info(addData).then(res => {
            this.$message({
              message: res.result,
              type: "success"
            });
            // this.$nextTick();
            // this.$router.replace("/refresh");
            this.$router.push('/hedging_strategy/order_management')
            this.closeing.closePage(this.$store.getters["d2admin/page/allPage"],this.$store.getters["d2admin/page/currentPage"])
          });
        }
      }
       } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    del_row() {
      if (this.datas.length != 0) {
        for (let i = 0; i < this.spotData.length; i++) {
          for (let index = 0; index < this.datas.length; index++) {
            if (this.spotData[i].trade_id == this.datas[index].trade_id) {
              this.spotData.splice(i, 1);
            }
          }
        }
      }
    },
    handlePaginationChange(val) {
      this.egForm.page = val;
      var a = {
        command_name: "",
        command_id: "",
        Instrument: "",
        page: this.egForm.page
      };
      getFutures_command_trade(a).then(res => {
        this.dialogVisible = true;
        this.tableData = res.result.results;
        this.egForm.pageTotal = res.result.count;
      });
    }
  }
};
</script>
<style lang="scss">
.resizeNone {
  .el-textarea__inner {
    //el_input中的隐藏属性
    resize: none; //主要是这个样式
  }
}
</style>
